<template>
	<view class="container">
		<view class="header boxS">
			<view class="h-item">
				<view>收货人</view>
				<view class="color3">
					<input type="text" placeholder="请输入收货人姓名" v-model="name"/>
				</view>
			</view>
			<view class="h-item">
				<view>手机号</view>
				<view class="color3">
					<input type="number" placeholder="请输入收货人手机号" v-model="tel" maxlength="11" @input="input"/>
				</view>
			</view>
		</view>
		<view class="header boxS" style="margin-top: 23rpx;">
			<view class="h-item">
				<view>所在地区</view>
				<view class="color3" @click="showdz = true" style="padding-right: 34rpx;position: relative;display: flex;align-items: center;">
					<text style="color: #989898;" v-show="!taddress.city">请选择省.市.区</text>
					<text style="color: #333333;" v-show="taddress.city">{{addList.province  + addList.city  + addList.area}}</text>
				</view>
			</view>
			<view class="h-item color3" style="height: 149rpx;margin-top: 37rpx;">
				<textarea style="height: 100%;width: 100%;" placeholder="请输入街道" v-model="address"></textarea>
			</view>
		</view>
		<view class="header boxS" style="margin-top: 76rpx;">
			<view class="h-item" style="justify-content: initial;">
				<view>地址标签</view>
				<view class="color3"
				 style="display: flex;text-align: left;"
					v-for="(item,index) in tabList" :key="item.id" 
					@click="tab(item.id)"
					>
					<view class="attr1" :class="{'active': active === item.id}">{{item.name}}</view>
				</view>
			</view>
			<view class="h-item">
				<view>设为默认地址</view>
				<view class="color3">
					<u-switch :active-value="1" :inactive-value="0" size="38" v-model="checked" active-color="#41CB05" @change="change"></u-switch>
				</view>
			</view>
		</view>
		<Taddress :title="'地址'" :showdz="showdz" @confirmdz="confirmdz" @close="close"></Taddress>
		<view class="baoBtn" @click="addAddress">保存</view>
	</view>
</template>

<script src="./newAddress.js"></script>
<style lang="scss" scoped>
	@import './newAddress.scss';
</style>
